<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom></HeadCustom>
		<view class="wrap">
			<view class="info fboxRow Ycenter bg-21242C border-radius12">
				<image class="avatar" :src="detail.imagePhoto" mode="aspectFill"></image>
				<view class="flex1">
					<text class="name font30">{{ detail.realName }}</text>
				</view>
			</view>
			<view class="item mt24 fboxRow Ycenter bg-21242C border-radius12">
				<view class="flex1 tit font30 lh44">备注</view>
				<view class="fboxRow Ynd">
					<input class="u-input fboxRow Ynd" v-model="fromData.nickname" type="text" placeholder="请设置好友备注"
						placeholder-style="color:#6B707C" maxlength="12" />
				</view>
			</view>
			<view class="item mt24 fboxRow Ycenter bg-21242C border-radius12" @click="showGroup">
				<view class="flex1 tit font30 lh44">分组</view>
				<view class="fboxRow">
					{{groupName.toString()}}
					<u-icon name="arrow-right" color="#6B707C"></u-icon>
				</view>
			</view>
			<view class="item mt24 fboxRow Ycenter bg-21242C border-radius12">
				<view class="flex1 tit font30 lh44">不让TA看我的点点</view>
				<view class="fboxRow">
					<u-switch space="2" v-model="fromData.isLookMine" :inactiveValue="0" :activeValue="1" activeColor="#E8CDA7"
						inactiveColor="#ACB4C7" size="20" :asyncChange="true" @change="switchChange">
					</u-switch>
				</view>
			</view>
			<view class="item mt24 fboxCol bg-21242C border-radius12">
				<view class="flex1 tit font30 lh44">描述</view>
				<view class="fboxRow mt16">
					<textarea class="u-text font30" :adjust-position="false" v-model="fromData.remark"
						placeholder="请输入" maxlength="200" placeholder-style="color:#6B707C" />
				</view>
			</view>
			<view class="fixed-space"></view>
			<view class="fixed-btn fboxRow Ycenter Xcenter bg-1A1D25">
				<!-- <view class="btn flex1 fboxRow Ycenter Xcenter font30 color-E8CDA7 border-E8CDA7" @click="submit">确定
				</view> -->
				<view class="btn flex1 fboxRow Ycenter Xcenter font30 color-141720 bg-linear" @click="submit">确定
				</view>
			</view>
		</view>
		<view class="modal-black">
		<u-popup :show="isGroup" @close="isGroup = false" mode="bottom">
			<view class="modal-box bg-21242C">
				<view class="hd font30 lh44">分组选择</view>
				<view class="bd">
				<checkbox-group @change="checkboxChange">
					<view class=" fboxWrap">
						<label class="check-item fboxRow Ycenter" v-for="(item, index) in groupList"
						:key="index">
							<view class="fboxRow Ycenter"><checkbox :value="item.groupId" style="transform:scale(0.7);"  color="#E8CDA7" :checked="item.checked" />{{item.groupName}}</view>
						</label>
					</view>
				</checkbox-group>
					
				</view>
				<view class="ft fboxRow Ycenter Xcenter bg-141720 color-E8CDA7 font30" @click="checkboxEnter">确定</view>
			</view>
		</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		getCard,
		cardGroupList
	} from '@/api/card.js';
	import {cardRequest} from '@/api/h5.js';
	export default {
		components: {},
		data() {
			return {
				theme: getApp().globalData.appTheme,
						globalColor: getApp().globalData.globalColor,
				detail: {},
				fromData: {
					"groupId": "",
					"groupIds": [],
					"isLookMine": 0,
					"nickname": "",
					"receiverMemberId": "",
					"remark": "",
					// "requestId": "",
					"requestSources": 5
				},
				groupIndex: 0,
				groupList:[],
				groupCheckId: [],
				groupName: [],
				isGroup: false,
				cardId: '',
			}
		},
		onLoad(option) {
			if (option && option.id) {
				this.cardId = option.id
				this.fromData.receiverMemberId = option.id
				this.linkData = {
					id: this.cardId
				}
				this.getDetail()
				this.cardGroupList()
			}
		},
		methods: {
			showGroup(){
				this.groupList.filter(item=>{
					if(this.fromData.groupIds.includes(item.groupId)){
						item.checked = true
					}else{
						item.checked = false
					}
				})
				this.isGroup = true
			},
			switchChange(e){
				this.fromData.isLookMine = e
			},
			checkboxChange(e){
				this.groupCheck = e.detail.value
			},
			checkboxEnter(){
				let list = []
				this.groupList.filter(item=>{
					if(this.groupCheck.includes(item.groupId)){
						list.push(item.groupName)
					}
				})
				this.fromData.groupIds = this.groupCheck
				this.groupName = list
				this.isGroup = false
			},
			cardGroupList(){
				cardGroupList().then(res=>{
					this.groupCheckId = [res.data[0].groupId]
					this.groupName = res.data[0].groupName
					this.fromData.groupIds = [res.data[0].groupId]
					this.groupList = res.data
				})
			},
			getDetail() {
				getCard({
					cardId: this.cardId
				}).then(res => {
					if (res.data) {
						this.detail = res.data
					}
				})
			},
			submit() {
				console.log(this.fromData,this.groupList)
				cardRequest(this.fromData).then(res=>{
					if(res.message == 'SUCCESS'){
						uni.showToast({
							icon: 'none',
							title: '申请成功'
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}
					console.log(res)
				})
			}
		}
	}
</script>

<style scoped>
	.modal-box{}
	.modal-box .hd{padding: 30rpx 60rpx 0;}
	.modal-box .bd{padding: 25rpx 10rpx 25rpx 60rpx;}
	.check-item{padding: 25rpx 0;margin-right: 50rpx;}
	.check-item /deep/ .uni-checkbox-input{background: none; border: 1px solid #E8CDA7;border-radius: 50%;}
	.modal-box .ft{width: 750rpx;height: 102rpx;}
	
	
	.bg-141720{background-color: var(--darkViewBgColor);}
	.info {
		padding: 32rpx;
	}

	.info .avatar {
		margin-right: 16rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.wrap {
		padding: 40rpx;
	}

	.item {
		padding: 32rpx;
	}

	.u-text {
		line-height: 44rpx;
		width: 606rpx;
		height: 287rpx;
		font-size: 30rpx;
		border-radius: 12rpx;
	}

	.u-input {
		text-align: right;
		width: 400rpx;
	}

	.fixed-space {
		height: 166rpx;
	}

	.fixed-btn {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		padding: 24rpx 40rpx 66rpx;
		height: 166rpx;
	}

	.fixed-btn .btn {
		height: 76rpx;
		border-radius: 12rpx;
	}

	.fixed-btn .btn+.btn {
		margin-left: 24rpx;
	}
</style>